<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/amazeui.min.css">
    <link rel="stylesheet" href="/css/amazeui.cropper.css">
    <link rel="stylesheet" href="/css/custom_up_img.css">


    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/commone.css">
    <link rel="stylesheet" media="screen and (min-width:481px)" href="/css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="/css/usercenter(1).css">

    <script src="/js/hm.js"></script>
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/footfixed.js"></script>

    <script src="/js/layer.js"></script>
    <link rel="stylesheet" href="/css/layer(1).css" id="layuicss-layer">
    <title>个人中心</title>

    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="/js/amazeui.min.js"></script>
    <script src="/js/cropper.min.js"></script>
    <script src="/js/custom_up_img.js"></script>


    <script type="text/javascript">
        // 修改手机号/邮箱
        function setPhone() {
            var userid = $("#userId").val();
            utilRole("修改手机号","/user_upd/"+userid);
        }
        // 修改手机号/邮箱
        function setEmail() {
            var userid = $("#userId").val();
            utilRole("修改邮箱","/user_EmailUpd/"+userid);
        }
        // 修改登录密码
        function setPwd() {
            var userid = $("#userId").val();
            utilRole("修改密码","/user_newPass/"+userid);
        }
        // 用户信息修改
        function userInfo() {
            var userid = $("#userId").val();
            utilRole("修改信息","/user_info/"+userid);
        }
        function utilRole(title,url){

            if (title == null || title == '') {
                title=false;
            };
            layer.open({
                type: 2,
                area: [650+'px', 300 +'px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade:0.4,
                title: title,
                content: url
            });
        }
    </script>
</head>
<body>
<div class="content">

    <div th:replace="common/hasbei_top"></div>


    <div class="content-main">
        <div class="main-info">

            <div th:replace="user/user_left"></div>


            <div class="main-user-right">
                <input type="hidden" id="userId" th:value="${uservo.getUserId()}">
                <div class="user-info-editor">
                    <div class="editor-top">
                        <h2>个人信息</h2>
                        <a th:href="${'/user_main/'+uservo.getUserId()}" class="go-center"><span>返回个人中心主页</span><img
                                src="/icon/arrow-bttom.png" alt="有贝口腔网"></a>
                    </div>

                    <div class="change-info">
                        <div class="change-info-top">
                            <div class="change-info-defa">
                                <div class="defa-img"><a href="javascript:;"><img
                                        th:src="${uservo.getImgPath()}" alt="有贝口腔网"></a></div>
                                <div class="defa-text">
                                    <h3 class="h3-name" th:text="${uservo.getUserNickname()}"></h3>
                                    <p class="p-style" th:text="${uservo.getUserIntroduce()}"></p>
                                </div>
                            </div>
                            <div class="change-info-btn">修改信息</div>
                        </div>


                        <div class="change-info-show" style="display: none;">
                            <div class="change-show-img">
                                <div class="up-img-cover" id="up-img-touch">
                                    <img class="am-circle" id="user-photo"
                                         th:src="${uservo.getImgPath()}">
                                    <span class="change-img-btn">更换头像</span>
                                </div>
                                <!--图片上传框弹框-->
                                <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
                                    <div class="am-modal-dialog up-frame-parent up-frame-radius">
                                        <div class="am-modal-hd up-frame-header">
                                            <label>上传头像</label>
                                            <a href="javascript: void(0)" class="am-close am-close-spin"
                                               data-am-modal-close="">×</a>
                                        </div>
                                        <div class="am-modal-bd  up-frame-body">
                                            <div class="am-g am-fl">
                                                <div class="am-form-group am-form-file">
                                                    <div class="am-fl">
                                                        <button type="button"
                                                                class="am-btn am-btn-default am-btn-sm choose-img">
                                                            选择要上传的图片
                                                        </button>
                                                    </div>
                                                    <input type="file" id="inputImage">
                                                </div>
                                            </div>
                                            <div class="am-g am-fl">
                                                <div class="up-pre-before up-frame-radius">
                                                    <img alt="" th:src="${uservo.getImgPath()}"
                                                         id="image">
                                                </div>
                                                <div class="up-pre-after up-frame-radius">
                                                </div>
                                            </div>
                                            <div class="am-g am-fl">
                                                <div class="up-control-btns">
                                                    <span onclick="rotateimgleft()">左转</span>
                                                    <span onclick="rotateimgright()">右转</span>
                                                    <span id="up-btn-ok">提交</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="writer-area">
                                <div class="write-box">
                                    <p class="write-box-p">
                                        <input class="write-box-input" placeholder="输入你的昵称" maxlength="20" type="text"
                                               th:value="${uservo.getUserNickname()}">
                                        <span class="write-box-span"><i>0</i>/20</span>
                                    </p>
                                    <p class="weite-box-tip">2-20个汉字，请勿使用包含特殊符号或含有明显营销推广意图的媒体名</p>
                                </div>
                                <div class="write-box">
                                    <p class="write-box-p">
                                        <textarea class="write-box-textarea" placeholder="不要做懒人，给自己一个介绍吧"
                                                  maxlength="250"
                                                  type="text" th:text="${uservo.getUserIntroduce()}"></textarea>
                                        <span class="write-box-right"><i>0</i>/250</span>
                                    </p>
                                    <p class="weite-box-tip">良好的简介内容更容易收获用户的关注。填写建议个人介绍，内容介绍</p>
                                </div>
                                <div class="sub-btn">
                                    <div class="anniu sure-btn">保存</div>
                                    <div class="anniu close-btn">取消</div>
                                </div>
                            </div>
                        </div>


                        <div class="login-other">
                            <div class="login-other-title">登录方式</div>
                            <div class="login-other-type">
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">绑定手机</span>
                                        <span class="change-obj-show" th:text="${uservo.getUserTelephone()}!=null?${uservo.getUserTelephone()}:'暂未绑定手机号'"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setPhone()">设置修改手机号</div>
                                </div>
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">修改邮箱</span>
                                        <span class="change-obj-show" th:text="${uservo.getUserEmail()}!=null?${uservo.getUserEmail()}:'暂未绑定邮箱号'"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setEmail()">设置修改邮箱</div>
                                </div>
                            </div>
                        </div>
                        <div class="login-other">
                            <div class="login-other-title">安全设置</div>
                            <div class="login-other-type">
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">密码设置</span>
                                        <span class="change-obj-show"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setPwd(this)">设置登录密码</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>


    <div th:replace="common/hasbei_bottom"></div>


    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?4245936cbef31e434e2b387b56dfd7d8";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script>

        /* $("li").click(function(){
            $("li").removeClass("select-active");
            $(this).addClass("select-active");
        }) */



        $(".change-info-show").hide();
        $(".change-info-btn").click(function(){
            $(".change-info-top").hide();
            $(".change-info-show").show();
        })
        $(".write-box-input").change(function(){
            var inputle = $(this).val().length;
            $(".write-box-span i").text(inputle);
        })
        $(".write-box-textarea").change(function(){
            var textareale = $(this).val().length;
            $(".write-box-right i").text(textareale);
        })
        $(".write-box-input").focus(function(){
            $(this).parent().css("border-color","rgba(41,167,230,1)");
        })
        $(".write-box-input").blur(function(){
            $(this).parent().css("border-color","#ddd");
        })
        $(".write-box-textarea").focus(function(){
            $(this).parent().css("border-color","rgba(41,167,230,1)");
        })
        $(".write-box-textarea").blur(function(){
            $(this).parent().css("border-color","#ddd");
        })


        $(".sure-btn").click(function(){
            var inputval = $(".write-box-input").val();
            var textareaval =$(".write-box-textarea").val();
            if(inputval == ""){
                layer.msg("请输入昵称");
                return false;
            }
            $(".h3-name").text(inputval);
            $(".p-style").text(textareaval);
            //更新用户信息
            updateUserInfo(inputval,textareaval);
        })
        $(".close-btn").click(function(){
            $(".change-info-show").hide();
            $(".change-info-top").show();
        })



        //更新用户信息
        var logo="";

        function updateUserInfo(nick,desc){
            $.post("/updateUserInfo?nick="+nick+"&userDesc="+desc+"&logo="+logo,function(data){
                if(data.code ==201){
                    layer.msg("保存成功");
                    $(".change-info-show").hide();
                    $(".change-info-top").show();
                    location.reload();
                }else{
                    layer.msg(data.message);
                }
            });
        }


        $(function(){//绑定上传头像事件,上传头像
            $('#up-btn-ok').on('click',function(){
                // var $modal = $('#my-modal-loading');
                // var $modal_alert = $('#my-alert');
                var $modal = $('#doc-modal-1');
                var img_src=$image.attr("src");
                if(img_src==""){

                    // set_alert_info("没有选择上传的图片");
                    // $modal_alert.modal();
                    layer.msg("没有选择上传的图片")

                    return false;
                }

                // $modal.modal();
                // var index = layer.load(1, {
                //     shade: [0.5,'#fff'] //0.1透明度的白色背景
                // });

                var url= '/userimgUpload?t='+new Date().getTime();
                var canvas=$("#image").cropper('getCroppedCanvas');
                var data=canvas.toDataURL(); //转成base64
                var params={};
                params["upfile"]=data.toString();
                $.ajax({
                    url:url,
                    dataType:'json',
                    type: "POST",
                    data: params,
                    success: function(data, textStatus){
                        // $modal.modal('close');
                        // set_alert_info(data.result);
                        // $modal_alert.modal();
                        console.log(data)
                        if(data.code){
                            layer.msg("上传头像成功",function () {
                                logo=data.data;
                                $("#up-img-touch img").attr("src",logo);
                                $modal.modal('close');//关闭弹窗
                            })


                            // layer.msg("上传头像成功");
                            // var img_name=data.file.split('/')[2];
                            // console.log(img_name);
                            // $("#pic").text(img_name);

                        }else {
                            layer.msg(data.message);

                        }
                    },
                    error: function(){

                        layer.msg("图片上传失败了！")

                        // $modal.modal('close');
                        // set_alert_info("上传图片失败了！");
                        // $modal_alert.modal();
                        //console.log('Upload error');
                    }
                });

            });
        });

    </script>
</div>
</body>

</html>